<template>
  <div class="box">
    <div class="header">
      <div class="header-left">
        <van-icon name="arrow-left" size="25" @click="onClickLeft" />
      </div>
      <div class="header-search" @click="jumpSearch">
        <van-search
          v-model="searchText"
          placeholder=""
          shape="round"
          input-align="center"
        />
      </div>
      <div class="header-right">
        <van-popover
          v-model="showPopover"
          trigger="click"
          :actions="actions"
          @select="onSelect"
          placement="bottom-end"
          theme="dark"
        >
          <template #reference>
            <van-icon name="ellipsis" size="25" />
          </template>
        </van-popover>
      </div>
    </div>
    <van-divider :style="{ margin: 0 }" />
    <div class="main">
      <van-card
        v-for="(item,index) in goosList"
        :key="index"
        :num="item.sales"
        :price="item.originprice"
        :desc="item.desc"
        :title="item.proname"
        :thumb="item.img1"
        @click="jumpTo(item.proid)"
      />

      <!-- 显示分享面板 -->
      <div class="share">
        <van-share-sheet
          v-model="showShare"
          title="立即分享给好友"
          :options="options"
          @select="onSelectShare"
        />
      </div>
    </div>
  </div>
</template>
<script>
import Vue from "vue";
import { Icon, Search, Popover, ShareSheet, Card } from "vant";
import {getProsearch} from "../../api/search";
import {getBrandprolist} from "../../api/kind"

Vue.use(Icon);
Vue.use(Search);
Vue.use(Popover);
Vue.use(ShareSheet);
Vue.use(Card);

export default {
  data() {
    return {
      showPopover: false,
      searchText: this.$route.query.keyword,
      showShare: false,
      goosList:[],
      actions: [
        { text: "首页", icon: "wap-home", index: 0 },
        { text: "分享", icon: "share", index: 1 },
      ],
      options: [
        { name: "微信", icon: "wechat" },
        { name: "微博", icon: "weibo" },
        { name: "复制链接", icon: "link" },
        { name: "分享海报", icon: "poster" },
        { name: "二维码", icon: "qrcode" },
      ],
    };
  },
  created () {
    let params = {keyword:this.$route.query.keyword};
    getProsearch(params).then((res)=>{
        if(res.data.code == '200'){
            this.goosList = res.data.data
        }
    })
    // 分类列表
    let paramsData = {params:this.$route.query.params};
    console.log(paramsData);
    getBrandprolist(paramsData).then((res)=>{
        console.log(res);
    })
  },
  methods: {
    onClickLeft() {
      this.$router.back();
    },
    onSelect(action) {
      console.log(action.index);
      switch (action.index) {
        case 0:
          this.$router.back();
          break;
        case 1:
          this.showShare = true;
          break;
        default:
          break;
      }
    },
    onSelectShare(option) {
      console.log(option.name);
      this.showShare = false;
    },
    jumpSearch() {
      this.$router.push("/kind/search");
    },
    // 跳转到商品详情页
    jumpTo(proid) {
      this.$router.push("/detail/" + proid);
    }
  },
};
</script>
<style scoped>
/* 头部样式 */
.header {
  background-color: #fff;
  align-items: center;
  overflow: hidden;
}
.van-search {
  width: 3rem;
}
/* 列表 */
.main{
    background: #fff;
}
.van-card{
    margin: .1rem;
}
</style>